<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单区域 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="订单编号">
        <el-input v-model="order_number" disabled></el-input>
      </el-form-item>

      <el-form-item label="是否发货">
        <p style="font-size: 15px">1表示发货,0表示未发货</p>
        <el-input v-model="form.is_send"></el-input>
      </el-form-item>

      <el-form-item label="支付状态">
        <p style="font-size: 15px">
          0表示未支付,1表示支付宝,2表示微信,3表示银行卡
        </p>
        <el-input v-model="form.order_pay"></el-input>
      </el-form-item>

      <el-form-item label="发票抬头">
        <p style="font-size: 15px">'个人'或者'公司'</p>
        <el-input v-model="form.order_fapiao_title"></el-input>
      </el-form-item>

      <el-form-item label="发票内容">
        <p style="font-size: 15px"></p>
        <el-input v-model="form.order_fapiao_content"></el-input>
      </el-form-item>

      <el-form-item label="公司名称">
        <p style="font-size: 15px"></p>
        <el-input v-model="form.aaa"></el-input>
      </el-form-item>

      <el-form-item label="订单价格">
        <p style="font-size: 15px"></p>
        <el-input v-model="form.order_price"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改订单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      form: {
        is_send: '',
        order_number: '',
        order_pay: '',
        pay_status: '',
        order_price: 0,
        pay_status: '',
        order_fapiao_title: '',
        aaa: '',
      },
    }
  },
  created() {
    this.getOrderInfo()
    console.log(this.id)
  },
  methods: {
    // 获取订单信息
    async getOrderInfo() {
      const res = await this.$http.get('orders/' + this.id)
      this.form = res.data.data
    },
    // 修改订单
    async edit() {
      const res = await this.$http.put('orders/' + this.id, this.form)
      console.log(res)
      if (res.data.meta.status !== 201) {
        return this.$message.error('修改订单失败')
      }
      this.$message.success('修改订单成功')
      this.$router.push('/orders/')
    },
    onSubmit() {
      this.edit()
    },
  },
}
</script>

<style></style>
